<template>
  <div class="rightTop">
    <DecTitle text="实时能耗" />
    <div class="view">
      <barChart :option="option" />
      <div class="total">
        <div>
          <div class="vlaue">{{ value || "---" }}</div>
          <div class="title">度电/平方</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DecTitle from "@/components/decTitle";
import barChart from "@/components/echart/barChart";
import { option } from "./option";
export default {
  components: {
    DecTitle,
    barChart,
  },
  data() {
    return {
      option: null,
      value: 4000,
    };
  },
  created(){
    this.option = option.call(this)
  }
};
</script>

<style lang="scss" scoped>
.rightTop {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .total {
    position: absolute;
    height: 150px;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    .title {
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      letter-spacing: 1.5px;
       transform: translateY(-6px);
       font-weight: bold;
    }

    .vlaue {
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 24px;
     
    }
  }
}
</style>